<html>
<head>
<title>Ajax Image Upload 9lessons blog</title>
</head>

<script type="text/javascript" src="scripts/jquery.min.js"></script>
<script type="text/javascript" src="scripts/jquery.form.js"></script>

<script type="text/javascript">
	$(document).ready(function() { 
		
		$('#photoimg').live('change', function() { 
			$("#preview").html('');
			$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
			$("#imageform").ajaxForm({
				 //target: '#preview',
				 // dataType identifies the expected content type of the server response 
		        dataType:  'json', 
		 
		        // success identifies the function to invoke when the server response 
		        // has been received 
		        success:   processJson 
			}).submit();
			
			function processJson(data) { 
			    // 'data' is the json object returned from the server 
			    alert(data.url_Image); 
			}
		});
	}); 
</script>

<style>
body {
	font-family: arial;
}

.preview {
	width: 200px;
	border: solid 1px #dedede;
	padding: 10px;
}

#preview {
	color: #cc0000;
	font-size: 12px
}
</style>
<body>

	<div style="width: 600px">

		<form id="imageform" method="post" enctype="multipart/form-data"
			action='ajaximage.php'>
			Upload your image <input type="file" name="photoimg" id="photoimg" />
		</form>
		<div id='preview'></div>


	</div>
</body>
</html>